<template>
  <div>
    <el-form
      ref="formRef"
      :class="handleType == 'view' ? 'view' : ''"
      :model="form"
      label-align="right"
      size="default"
      :label-position="handleType == 'view' ? 'left' : 'top'"
      :rules="rules"
    >
      <template v-if="handleType == 'view'">
        <el-row :gutter="21">
          <el-col :span="6">
            <el-form-item label="产品毛重:"> {{ form.gross_weight_g }} g </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品净重:"> {{ form.net_weight_g }} g </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="包裹重:"> {{ form.packing_weight_g }} g </el-form-item>
          </el-col>
          <el-col :span="6"> </el-col>
          <el-col :span="6">
            <el-form-item label="产品包装尺寸:" class="w-full">
              {{ form.packing_size_cm.length }} * {{ form.packing_size_cm.width }} *{{
                form.packing_size_cm.height
              }}
              cm
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品尺寸:" class="w-full">
              {{ form.product_size_cm.length }} * {{ form.product_size_cm.width }} *
              {{ form.product_size_cm.height }} cm
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="整箱尺寸:" class="w-full">
              {{ form.packing_qty_size_cm.length }} *
              {{ form.packing_qty_size_cm.width }} *
              {{ form.packing_qty_size_cm.height }} cm
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="整箱毛重:">
              {{ form.packing_gross_weight_kg }} kg
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装柜数量:">
              {{ form.cabinets_qty }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装箱数量:">
              {{ form.packing_qty }}
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-else>
        <div class="w-[100%] flex flex-wrap">
          <el-form-item
            label="产品毛重"
            :required="handleType != 'view'"
            prop="gross_weight_g"
          >
            <template v-if="handleType == 'view'"> {{ form.gross_weight_g }} g </template>
            <template v-else>
              <el-input
                class="w-ful1l"
                v-model="form.gross_weight_g"
                oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                :disabled="disabled"
                @blur="blurGrossWeight()"
              >
                <template #append>g</template>
              </el-input>
            </template>
          </el-form-item>

          <el-form-item
            label="产品净重"
            :required="handleType != 'view'"
            prop="net_weight_g"
          >
            <template v-if="handleType == 'view'"> {{ form.net_weight_g }} g </template>
            <template v-else>
              <el-input
                class="w-ful1l"
                v-model="form.net_weight_g"
                oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                :disabled="disabled"
              >
                <template #append>g</template>
              </el-input>
            </template>
          </el-form-item>

          <el-form-item label="包裹重">
            <template v-if="handleType == 'view'">
              {{ form.packing_weight_g }} g
            </template>
            <template v-else>
              <el-input
                class="w-full1"
                v-model="form.packing_weight_g"
                oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                :disabled="disabled"
              >
                <template #append>g</template>
              </el-input>
            </template>
          </el-form-item>
        </div>

        <div class="w-[100%] flex flex-wrap">
          <el-form-item
            label="产品包装尺寸/cm"
            :class="handleType != 'view' ? 'w-400px' : 'w-[300px]'"
          >
            <template v-if="handleType == 'view'">
              <span class="mr-[8px]">{{ form.packing_size_cm.length }} *</span>
              <span class="mr-[8px]">{{ form.packing_size_cm.width }} *</span>
              <span class="mr-[0]">{{ form.packing_size_cm.height }}</span>
              cm
            </template>
            <template v-else>
              <VGroup>
                <el-input
                  v-model="form.packing_size_cm.length"
                  placeholder="长"
                  oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                  :disabled="disabled"
                  @blur="blurPackage(form.packing_size_cm)"
                ></el-input>
                <el-input
                  v-model="form.packing_size_cm.width"
                  placeholder="宽"
                  oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                  :disabled="disabled"
                  @blur="blurPackage(form.packing_size_cm)"
                ></el-input>
                <el-input
                  v-model="form.packing_size_cm.height"
                  placeholder="高"
                  oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                  :disabled="disabled"
                  @blur="blurPackage(form.packing_size_cm)"
                >
                </el-input>
                <span class="append">cm</span>
              </VGroup>
            </template>
          </el-form-item>

          <el-form-item
            label="产品尺寸"
            :class="handleType != 'view' ? 'w-400px' : 'w-[300px]'"
          >
            <template v-if="handleType == 'view'">
              <span class="mr-[8px]">{{ form.product_size_cm.length }} *</span>
              <span class="mr-[8px]">{{ form.product_size_cm.width }} *</span>
              <span class="mr-[0]">{{ form.product_size_cm.height }}</span>
              cm
            </template>
            <template v-else>
              <VGroup>
                <el-input
                  v-model="form.product_size_cm.length"
                  oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                  :controls="false"
                  placeholder="长"
                  :disabled="disabled"
                />
                <el-input
                  v-model="form.product_size_cm.width"
                  oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                  :controls="false"
                  placeholder="宽"
                  :disabled="disabled"
                />
                <el-input
                  v-model="form.product_size_cm.height"
                  oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                  :controls="false"
                  placeholder="高"
                  :disabled="disabled"
                >
                </el-input>
                <span class="append">cm</span>
              </VGroup>
            </template>
          </el-form-item>

          <el-form-item
            label="整箱尺寸"
            :class="handleType != 'view' ? 'w-400px' : 'w-[300px]'"
          >
            <template v-if="handleType == 'view'">
              <span class="mr-[8px]">{{ form.packing_qty_size_cm.length }} *</span>
              <span class="mr-[8px]">{{ form.packing_qty_size_cm.width }} *</span>
              <span class="mr-[0]">{{ form.packing_qty_size_cm.height }} *</span>
              cm
            </template>
            <template v-else>
              <VGroup>
                <el-input
                  v-model="form.packing_qty_size_cm.length"
                  oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                  :controls="false"
                  placeholder="长"
                  :disabled="disabled"
                />
                <el-input
                  v-model="form.packing_qty_size_cm.width"
                  oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                  :controls="false"
                  placeholder="宽"
                  :disabled="disabled"
                />
                <el-input
                  v-model="form.packing_qty_size_cm.height"
                  oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                  :controls="false"
                  placeholder="高"
                  :disabled="disabled"
                >
                </el-input>
                <span class="append">cm</span>
              </VGroup>
            </template>
          </el-form-item>
        </div>

        <div class="w-[100%] flex flex-wrap">
          <el-form-item label="整箱毛重" class="w-120px">
            <template v-if="handleType == 'view'">
              {{ form.packing_gross_weight_kg }} kg
            </template>
            <template v-else>
              <el-input
                class="w-full"
                v-model="form.packing_gross_weight_kg"
                oninput="value.replace(/[^\d.]/g, '').replace(/(\.\d{3}).+/, '$1').replace(/(\.\d{2})\d+/, '$1')"
                :disabled="disabled"
              >
                <template #append
                  ><span class="font-bold text-lg text-[#ff6334]">kg</span></template
                >
              </el-input>
            </template>
          </el-form-item>

          <el-form-item label="装柜数量" class="w-120px">
            <template v-if="handleType == 'view'"> {{ form.cabinets_qty }} </template>
            <template v-else>
              <el-input
                class="w-full"
                v-model.number="form.cabinets_qty"
                oninput="value=value.replace(/[^0-9]/g,'')"
                :disabled="disabled"
              ></el-input>
            </template>
          </el-form-item>

          <el-form-item label="装箱数量" class="w-120px">
            <template v-if="handleType == 'view'"> {{ form.packing_qty }} </template>
            <template v-else>
              <el-input
                class="w-full"
                v-model="form.packing_qty"
                oninput="value=value.replace(/[^0-9]/g,'')"
                :disabled="disabled"
              ></el-input>
            </template>
          </el-form-item>
        </div>
      </template>
    </el-form>
  </div>
</template>

<script setup name="SellInfo">
import { reactive, inject } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const emits = defineEmits(["update:modelValue"]);

let formData = reactive(inject("form"));
const add_sku_info = reactive(inject("add_sku_info"));
// 是否智能清洁产品
const is_classified = ref(false);
const classified = [148, 224, 24, 1];
watch(
  formData,
  (newVal, oldVal) => {
    is_classified.value =
      classified.includes(newVal.spu_category ? newVal.spu_category[0] : "") &&
      handleType.value == "edit";
  },
  { deep: true }
);

let handleType = reactive(inject("handleType"));

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
});

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    (handleType.value == "edit" &&
      !(window.BTN_AUTH || []).includes("/goods/task/product/weight-size-info"))
  );
});

const formRef = ref();
const form = computed({
  get: () => {
    return props.modelValue || {};
  },
  set: (val) => {
    emits("update:modelValue", val);
  },
});
const rules = reactive({
  gross_weight_g: [{ required: true, message: "请输入产品毛重", trigger: "change" }],
  net_weight_g: [{ required: true, message: "请输入产品净重", trigger: "change" }],
});
//表单校验
const validate = () => {
  return new Promise((resolve, reject) => {
    formRef.value?.validate((valid, fields) => {
      if (valid) {
        resolve(true);
      } else {
        reject(false);
      }
    });
  });
};
defineExpose({ validate });

const blurPackage = ({ length, width, height }) => {
  // if (!is_classified) return;
  // const dimensions = [length, width, height].sort((a, b) => a - b);
  // if (dimensions[0] > 0 && dimensions[1] >= 10 && dimensions[2] >= 15) {
  //   return true;
  // } else {
  //   ElMessage.error(
  //     "海外仓SKU的包装尺寸，至少有一边>=10cm;一边>=15cm，当前SKU未满足，请核实；若有疑问可咨询物流部：IvanWen(温振基)"
  //   );
  //   return false;
  // }
};

// 失去焦点生成包裹重
const blurGrossWeight = () => {
  if (handleType.value == "edit") return;
  if (Number(form.value.packing_weight_g) == 0 && Number(form.value.gross_weight_g) > 0) {
    form.value.packing_weight_g =
      Number(form.value.gross_weight_g) + Number(add_sku_info.value.add_weight || 0);
  }
};
</script>

<style lang="scss" scoped>
.bg-Fa {
  background: #f6faff;
  border-radius: 4px;
}

.view {
  :deep(.el-form-item__label) {
    color: #999999;
    font-weight: 400;
  }
}

.col-style {
  background: #eaf3ff;
  border-radius: 16px;
  font-size: 14px;
  color: #3487ff;
  padding: 4px 12px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-color {
  color: #898989;
}
.el-form-item {
  width: 200px;
  &.w-140px {
    width: 120px;
  }

  &.w-400px {
    width: 400px;
  }
}
.append {
  color: #909399;
  background: #f5f7fa;
  padding: 0 20px;
  border: 1px solid #e5e7eb;
}
</style>
